import React, { useEffect } from 'react'
import getCinemaListAction from '../redux/action/getCinemaListAction'
import { connect } from 'react-redux'

import { NavBar, Space, List } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'


function Cinemas(props) {
  let { cityName, list, getCinemaListAction } = props
  useEffect(() => {
    if (list.length === 0) {
      getCinemaListAction()
    }
  }, [list, getCinemaListAction])
  const right = (
    <div style={{ fontSize: 24 }} onClick={() => {
      props.history.push('/cinemas/search')
    }}>
      <Space style={{ '--gap': '16px' }}>
        <SearchOutline />
      </Space>
    </div>
  )
  const back = (
    <div style={{ float: "left" }} onClick={() => {
      props.history.push('/city')
    }}>{cityName}</div>
  )
  return (
    <div>
      <NavBar back={null} right={right} left={back}>
        影院
      </NavBar>
      <List>
        {
          list.map(item => (
            <List.Item
              key={item.cinemaId}
              description={item.address}
              extra={
                <div>
                  <div style={{ color: '#ff5f16' }}>￥{item.lowPrice / 100}起</div>
                  <span style={{ color: 'gray', fontSize: '10px', display:'block', textAlign: 'center'}}>距离未知</span>
                </div>
              }
            >
              {item.name}
            </List.Item>
          ))
        }
      </List>
    </div>
  )
}

const mapStateToProps = (state) => ({
  cityName: state.CityReducer.cityName,
  list: state.CinemaReducer.list
})

const mapDispatchToProps = {
  getCinemaListAction
}

export default connect(mapStateToProps, mapDispatchToProps)(Cinemas)